<template>
  <div id="app" :class="{ 'nav-collapse': !!navCollapse, 'sub-nav-collapse': !!subNavCollapse }">
    <!-- 已登录 -->
    <div v-if="loginStatus==3">
      <app-header></app-header>
      <app-side-nav></app-side-nav>
      <app-framework></app-framework>
      <app-footer></app-footer>
    </div>
    <app-full-page-content v-else></app-full-page-content>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import AppHeader from '@/components/header/index.vue'
  import AppSideNav from '@/components/side-nav/index.vue'
  import AppFooter from '@/components/footer/index.vue'
  import AppFramework from '@/components/framework/index.vue'
  import AppFullPageContent from '@/components/fullpage/index.vue'
  import * as constant from '@/store/constant'

  // Load css first
  import 'normalize.css/normalize.css'
  import 'iview/dist/styles/iview.css'
  import '@/assets/iconfont/iconfont.css'
  import '@/assets/style/app.less'

  export default {
    name: 'app',
    components: {
      AppHeader,
      AppSideNav,
      AppFooter,
      AppFramework,
      AppFullPageContent
    },
    watch: {
      $route: 'checkLoginStatus',
      loginStatus: 'onLoginStatusChange'
    },
    computed: {
      ...mapGetters({
        loginStatus: 'loginStatus',
        navCollapse: 'navCollapse',
        subNavCollapse: 'subNavCollapse'
      })
    },
    methods: {
      checkLoginStatus () {
        this.$store.dispatch('checkLoginStatus')
      },
      onLoginStatusChange () {
        let { isNotLoginLocations } = this.$apiHelper
        if (this.loginStatus === constant.LOGIN_STATUS.OK && this.$route.path === '/login') {
          this.$router.push({ path: '/' })
        } else if (this.loginStatus === constant.LOGIN_STATUS.NOLOGIN && isNotLoginLocations(this.$route.path)) {
          this.$router.push({ path: '/login' })
        }
      }
    },
    mounted () {
      this.$store.dispatch('checkLoginStatus')
    }
  }
</script>

